<template>
    <div class="app-container">

        <!-- 查询和其他操作 -->
        <div class="filter-container">
                <el-input v-model="listQuery.id" clearable class="filter-item" style="width: 200px;" placeholder="请输入用户id同平台用户表" />
         <el-input v-model="listQuery.orgId" clearable class="filter-item" style="width: 200px;" placeholder="请输入组织id" />
         <el-input v-model="listQuery.nickname" clearable class="filter-item" style="width: 200px;" placeholder="请输入昵称" />
         <el-input v-model="listQuery.provinceCode" clearable class="filter-item" style="width: 200px;" placeholder="请输入" />
         <el-input v-model="listQuery.cityCode" clearable class="filter-item" style="width: 200px;" placeholder="请输入" />
         <el-input v-model="listQuery.town" clearable class="filter-item" style="width: 200px;" placeholder="请输入乡镇" />
         <el-input v-model="listQuery.address" clearable class="filter-item" style="width: 200px;" placeholder="请输入详细地址" />
         <el-input v-model="listQuery.profile" clearable class="filter-item" style="width: 200px;" placeholder="请输入简介" />
         <el-input v-model="listQuery.avatar" clearable class="filter-item" style="width: 200px;" placeholder="请输入" />
         <el-input v-model="listQuery.status" clearable class="filter-item" style="width: 200px;" placeholder="请输入状态" />
         <el-input v-model="listQuery.orcode" clearable class="filter-item" style="width: 200px;" placeholder="请输入二维码" />
         <el-input v-model="listQuery.isDel" clearable class="filter-item" style="width: 200px;" placeholder="请输入" />
         <el-input v-model="listQuery.createTime" clearable class="filter-item" style="width: 200px;" placeholder="请输入" />
         <el-input v-model="listQuery.updateTime" clearable class="filter-item" style="width: 200px;" placeholder="请输入" />
            <el-button v-permission="['GET /admin/role/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
            <el-button v-permission="['POST /admin/role/create']" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
            <el-button v-permission="['POST /admin/role/del']" class="filter-item" type="primary" icon="el-icon-edit"
                       @click="revomveAll" :disabled="selectedIds.length === 0" >批量删除</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
                  @selection-change="handleSelectionChange" >
            <el-table-column type="selection" label="序号" sortable />
           <el-table-column align="center" label="用户id同平台用户表" prop="id" />
           <el-table-column align="center" label="组织id" prop="orgId" />
           <el-table-column align="center" label="昵称" prop="nickname" />
           <el-table-column align="center" label="" prop="provinceCode" />
           <el-table-column align="center" label="" prop="cityCode" />
           <el-table-column align="center" label="乡镇" prop="town" />
           <el-table-column align="center" label="详细地址" prop="address" />
           <el-table-column align="center" label="简介" prop="profile" />
           <el-table-column align="center" label="" prop="avatar" />
           <el-table-column align="center" label="状态" prop="status" />
           <el-table-column align="center" label="二维码" prop="orcode" />
           <el-table-column align="center" label="" prop="isDel" />
           <el-table-column align="center" label="" prop="createTime" />
           <el-table-column align="center" label="" prop="updateTime" />

            <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-permission="['POST /admin/role/update']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button v-permission="['POST /admin/role/delete']" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    <el-button v-permission="['GET /admin/role/permissions']" type="primary" size="mini" @click="handlePermission(scope.row)">授权</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

        <!-- 添加或修改对话框 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
                <el-form-item label="用户id同平台用户表" prop="id">
                    <el-input v-model="dataForm.id" />
                </el-form-item>
                <el-form-item label="组织id" prop="orgId">
                    <el-input v-model="dataForm.orgId" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="dataForm.nickname" />
                </el-form-item>
                <el-form-item label="" prop="provinceCode">
                    <el-input v-model="dataForm.provinceCode" />
                </el-form-item>
                <el-form-item label="" prop="cityCode">
                    <el-input v-model="dataForm.cityCode" />
                </el-form-item>
                <el-form-item label="乡镇" prop="town">
                    <el-input v-model="dataForm.town" />
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="dataForm.address" />
                </el-form-item>
                <el-form-item label="简介" prop="profile">
                    <el-input v-model="dataForm.profile" />
                </el-form-item>
                <el-form-item label="" prop="avatar">
                    <el-input v-model="dataForm.avatar" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-input v-model="dataForm.status" />
                </el-form-item>
                <el-form-item label="二维码" prop="orcode">
                    <el-input v-model="dataForm.orcode" />
                </el-form-item>
                <el-form-item label="" prop="isDel">
                    <el-input v-model="dataForm.isDel" />
                </el-form-item>
                <el-form-item label="" prop="createTime">
                    <el-input v-model="dataForm.createTime" />
                </el-form-item>
                <el-form-item label="" prop="updateTime">
                    <el-input v-model="dataForm.updateTime" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
                <el-button v-else type="primary" @click="updateData">确定</el-button>
            </div>
        </el-dialog>

        <!-- 权限配置对话框 -->
        <el-dialog :visible.sync="permissionDialogFormVisible" title="权限配置">
            <el-tree
                    ref="tree"
                    :data="systemPermissions"
                    :default-checked-keys="assignedPermissions"
                    show-checkbox
                    node-key="id"
                    highlight-current
            >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span>{{ data.label }}</span>
          <el-tag v-if="data.api" type="success" size="mini">{{ data.api }}</el-tag>
        </span>
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="permissionDialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updatePermission">确定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { createPlatUserExtend, delPlatUserExtend, batchDel, editPlatUserExtend, getInfo, getPagePlatUserExtend,getListPlatUserExtend } from '@/api/platUserExtend'
    import Pagination from '@/components/Pagination'
    export default {
        name: 'platUserExtend',
        components: { Pagination },
        data() {
            return {
                selectedIds: [],
                list: null,
                total: 0,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 20,
                    sort: 'add_time',
                    order: 'desc',
                    queryBean: {
                 id:undefined,
                 orgId:undefined,
                 nickname:undefined,
                 provinceCode:undefined,
                 cityCode:undefined,
                 town:undefined,
                 address:undefined,
                 profile:undefined,
                 avatar:undefined,
                 status:undefined,
                 orcode:undefined,
                 isDel:undefined,
                 createTime:undefined,
                 updateTime:undefined,
        }
        },
            dataForm: {
            id:undefined,
            orgId:undefined,
            nickname:undefined,
            provinceCode:undefined,
            cityCode:undefined,
            town:undefined,
            address:undefined,
            profile:undefined,
            avatar:undefined,
            status:undefined,
            orcode:undefined,
            isDel:undefined,
            createTime:undefined,
            updateTime:undefined,
            },
            dialogFormVisible: false,
                    dialogStatus: '',
                    textMap: {
                update: '编辑',
                        create: '创建'
            },
            rules: {
                roleName: [
                    { required: true, message: '角色名称不能为空', trigger: 'blur' }
                ]
            },
            permissionDialogFormVisible: false,
                    systemPermissions: null,
                    assignedPermissions: null,
                    permissionForm: {
                roleId: undefined,
                        permissions: []
            }
        }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                getPagePlatUserExtend(this.listQuery)
                        .then(response => {
                            this.list = response.data.data.records
                            this.total = response.data.data.total
                            this.listLoading = false
                        })
                        .catch(() => {
                            this.list = []
                            this.total = 0
                            this.listLoading = false
                        })
            },
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            resetForm() {
                this.dataForm = {
                    id: undefined,
                    roleName: undefined,
                    roleCode: undefined
                }
            },
            handleCreate() {
                this.resetForm()
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            createData() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        createPlatUserExtend(this.dataForm)
                                .then(response => {
                                    this.list.unshift(response.data.data)
                                    this.dialogFormVisible = false
                                    this.$notify.success({
                                        title: '成功',
                                        message: '添加角色成功'
                                    })
                                    this.getList()
                                })
                                .catch(response => {
                                    this.$notify.error({
                                        title: '失败',
                                        message: response.data.errmsg
                                    })
                                })
                    }
                })
            },
            handleUpdate(row) {
                this.dataForm = Object.assign({}, row)
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            updateData() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        editPlatUserExtend(this.dataForm)
                                .then(() => {
                                    for (const v of this.list) {
                                        if (v.id === this.dataForm.id) {
                                            const index = this.list.indexOf(v)
                                            this.list.splice(index, 1, this.dataForm)
                                            break
                                        }
                                    }
                                    this.dialogFormVisible = false
                                    this.$notify.success({
                                        title: '成功',
                                        message: '更新管理员成功'
                                    })
                                })
                                .catch(response => {
                                    this.$notify.error({
                                        title: '失败',
                                        message: response.data.errmsg
                                    })
                                })
                    }
                })
            },
            handleDelete(row) {
                delPlatUserExtend(row.id)
                        .then(response => {
                            this.$notify.success({
                                title: '成功',
                                message: '删除管理员成功'
                            })
                            this.getList()
                        })
                        .catch(response => {
                            this.$notify.error({
                                title: '失败',
                                message: response.data.errmsg
                            })
                        })
            },
            handlePermission(row) {
                this.permissionDialogFormVisible = true
                this.permissionForm.roleId = row.id
                getPermission({ roleId: row.id })
                        .then(response => {
                            this.systemPermissions = response.data.data.systemPermissions
                            this.assignedPermissions = response.data.data.assignedPermissions
                            var _curPermissions = response.data.data.curPermissions
                            if (_curPermissions) {
                                var _map = {}
                                _curPermissions.forEach(r => {
                                    _map[r] = true
                                })

                                this.systemPermissions.forEach(i => {
                                    i.children.forEach(j => {
                                        j.children.forEach(k => {
                                            if (_map[k.id]) {
                                                k.disabled = false
                                            } else {
                                                k.disabled = true
                                            }
                                        })
                                    })
                                })
                            }
                        })
            },
            updatePermission() {
                this.permissionForm.permissions = this.$refs.tree.getCheckedKeys(true)
                updatePermission(this.permissionForm)
                        .then(response => {
                            this.permissionDialogFormVisible = false
                            this.$notify.success({
                                title: '成功',
                                message: '授权成功'
                            })
                        })
                        .catch(response => {
                            this.$notify.error({
                                title: '失败',
                                message: response.data.errmsg
                            })
                        })
            },
            //  这里的selection是你所有选择的项
            handleSelectionChange(selection) {
                this.selectedIds = selection.map((item) => ""+item.id);
                console.log(selection);
            },
            revomveAll() {
                this.$confirm("确定删除吗?")
                        .then(()=>{
                            batchDel(this.selectedIds)
                                    .then(response => {
                                        this.$notify.success({
                                            title: '成功',
                                            message: '删除成功'
                                        })
                                        this.getList()
                                    })
                                    .catch(response => {
                                        this.$notify.error({
                                            title: '失败',
                                            message: response.data.errmsg
                                        })
                                    })
                        })
                        .catch(() => {
                            this.$message.info("取消删除");
                        });
            }
        }
    }
</script>
